<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 通过栅格布局 -->
        <!-- <el-row>
          <el-col :span="20">左</el-col>
          <el-col :span="4">右</el-col>
        </el-row> -->
        <!-- 通过flex布局 -->
        <tree-node :data="companyInfo">
          <el-dropdown-item :disabled="!hasPermission('add-dept')" @click.native="onAdd(companyInfo)">新增子部门</el-dropdown-item>
        </tree-node>
        <el-tree :data="list" :props="{label: 'name'}" default-expand-all>
          <template v-slot="{ data }">
            <!-- 输入<tr,选择<tree-node>,点击回车 -->
            <tree-node :data="data">
              <el-dropdown-item v-has-perm="'add-dept'" @click.native="onAdd(data)">新增子部门</el-dropdown-item>
              <el-dropdown-item @click.native="onUpdate(data.id)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="onDel(data.id)">删除部门</el-dropdown-item>
            </tree-node>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 新增部门 -->
    <!-- .sync修饰符 -->
    <!-- 用途:简化父子通信,让父组件模板变得简单 -->
    <!-- 特征: -->
    <!-- 子组件,要修改数据,发消息$emit('update:属性名称', 改变值) -->
    <!-- 父组件可以可以通过:属性名称.sync="属性值" -->
    <!-- <add-dept :dialog-visible="dialogVisible" @update:dialogVisible="dialogVisible = $event"></add-dept> -->
    <!-- 使用.sync语法糖,简化父模板 -->
    <add-dept ref="addDeptRef" :dialog-visible.sync="dialogVisible" :node="currentNode" @success="getDepartments"></add-dept>
  </div>
</template>

<script>
import treeNode from './components/tree-node.vue'
import { delDepartment, getDepartmentDetail, getDepartments } from '@/api/departments.js'
import { translateListToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'DepartmentsPage',
  components: { treeNode, AddDept },
  data() {
    return {
      companyInfo: { name: '传智教育', manager: '负责人', id: '' },
      list: [],
      dialogVisible: false,
      currentNode: {} // 当前操作的部门
    }
  },
  computed: {
    points() {
      return this.$store.state.user.userInfo.roles.points
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    async getDepartments() {
      const { companyName, depts } = await getDepartments()
      this.companyInfo.name = companyName
      this.list = translateListToTree(depts, '')
    },
    onAdd(node) {
      console.log('打开新增对话框')
      this.currentNode = node
      this.dialogVisible = true
    },
    async onUpdate(id) {
      // 回显数据,把数据传到子组件的表单对象当中
      // this.$refs.addDeptRef.form = await getDepartmentDetail(id)
      await this.$refs.addDeptRef.getDepartmentDetail(id)
      // 打开对话框
      this.dialogVisible = true
    },
    onDel(id) {
      // 确认删除,通过代码 片段elmecon
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        // 调用接口
        await delDepartment(id)
        // 提示成功
        this.$message.success('操作成功')
        // 刷新
        this.getDepartments()
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
